import React from 'react'
import logo from '../../logo.svg'
import { l } from '../../utils/storage'
import { Button, Dropdown, MenuProps, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
export const MyHeader: React.FC = () => {
  const userInfo = l.getItem('userInfo') || {}
  const nickname = userInfo.nickname
  const avator = userInfo.avator
  const navigate = useNavigate()
  const handleClick: MenuProps['onClick'] = (e) => {
    if (e.key === '4') {
      l.removeItem('userInfo')
      l.removeItem('token')
      navigate('/login')
    }
  }
  const menu = {
    items: [
      {
        label: '我的信息',
        key: '1',
      },
      {
        label: '我的信息',
        key: '2',
      },
      {
        label: '我的信息',
        key: '3',
      },
      {
        label: '退出登陆',
        key: '4',
      },
    ],
    onClick: handleClick,
  }
  return (
    <div
      style={{
        height: 64,
        overflow: 'hidden',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <img src={logo} alt="" height={50} className="logo" />
        <h3 style={{ color: 'white' }}>八维管理系统</h3>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <img src={avator} alt="" height={50} />
        <Dropdown menu={menu}>
          <Button>
            <Space>
              <span>{nickname} </span>
              <DownOutlined></DownOutlined>
            </Space>
          </Button>
        </Dropdown>
      </div>
    </div>
  )
}
